<template>
  <el-dialog
    class="public-dialog"
    title="批量打印"
    width="500px"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
    destroy-on-close
  >
    <div class="flex flex-col gap-2 w-full">
      <div class="grid grid-cols-3 gap-x-3">
        <strong
          >全部:
          <span class="text-blue-600">{{ list?.total_cnt || 0 }}</span></strong
        >
        <strong
          >可打印:
          <span class="text-green-600">{{
            list?.success_cnt || 0
          }}</span></strong
        >
        <strong
          >不可打印:
          <span class="text-red-600">{{ list?.fail_cnt || 0 }}</span></strong
        >
      </div>
      <div v-if="list?.fail_cnt > 0">
        <div class="text-red-600 flex items-center gap-1 mb-1 font-bold">
          <SvgIcon icon-class="CircleCloseFilled" />不可打印：
        </div>
        <div v-for="item in list?.fail_data" :key="item">
          {{ item }}
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handlePrint"
        >
          打印
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import "@/assets/js/CLodopfuncs.js";
import { ElMessage } from "element-plus";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { watchEffect } from "vue";
import { batchPrint } from "../../api/index.js";
const props = defineProps({
  id: { type: Array, default: () => [] },
  modelValue: { type: Boolean, default: false },
  optionsData: { type: Object, default: () => ({}) },
  type: { type: String, default: "" },
});
const { id } = toRefs(props);
const emit = defineEmits(["update:modelValue", "close"]);
const list = ref({});
const getDetail = async () => {
  const { data } = await batchPrint({ id: id.value });
  list.value = data || {};
};
watchEffect(() => {
  if (id.value.length) {
    getDetail();
  }
});

const handlePrint = async () => {
  for (const form of list.value.success_data) {
    console.log(form);
    CLODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
    CLODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width");
    CLODOP.NEWPAGEA();
    const html = `
      <h2 style='text-align: center;'>物流付款申请书</h2>
      <table style="border-spacing: 0;font-size: 14px" border="1" width="100%">
        <colgroup>
          <col style="width: 10%">
          <col style="width: 23%">
          <col style="width: 10%">
          <col style="width: 23%">
          <col style="width: 10%">
          <col style="width: 23%">
        </colgroup>
        <tr>
          <td>物流付款单号</td>
          <td>${form?.bill?.logistics_pay_number || ""}</td>
          <td>来源</td>
          <td>${form?.bill?.source_type || ""}</td>
          <td>申请项目</td>
          <td>${form?.bill?.rp_type || ""}</td>
        </tr>
        <tr>
          <td>物流商名称</td>
          <td>${form?.bill?.logistics_name || ""}</td>
          <td>账期</td>
          <td>${form?.bill?.settle_type || ""}</td>
          <td>付款主体公司</td>
          <td>${form?.bill?.pay_main_company_name || ""}</td>
        </tr>
        <tr>
          <td>付款方式</td>
          <td>${form?.bill?.pay_type || ""}</td>
          <td>付款账户</td>
          <td>${form?.bill?.pay_account_name || ""}</td>
          <td>银行账号</td>
          <td>${form?.bill?.pay_bank_account || ""}</td>
        </tr>
        <tr>
          <td>人民币金额</td>
          <td>${form?.bill?.pay_total_amount_cny || ""}</td>
          <td>期望付款日期</td>
          <td>${form?.bill?.expected_pay_date || ""}</td>
          <td>申请人</td>
          <td>${form?.bill?.apply_user || ""}</td>
        </tr>
        <tr>
          <td>原始账单</td>
          <td>${form?.bill?.original_bill_file || ""}</td>
          <td>付款凭证</td>
          <td>${form?.bill?.pay_receipts || ""}</td>
          <td>飞书审批</td>
          <td>${form?.bill?.audit_type || ""}</td>
        </tr>
        <tr>
          <td>物流备注</td>
          <td>${form?.bill?.logistics_remark || ""}</td>
          <td>财务备注</td>
          <td>${form?.bill?.finance_remark || ""}</td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <h4 style='margin-bottom: 10px'>付款明细</h4>
        <table style="border-spacing: 0;font-size: 14px" border="1" width="100%">
        <colgroup>
          <col style="width: 25%">
          <col style="width: 10%">
          <col style="width: 10%">
          <col style="width: 20%">
          <col style="width: 20%">
          <col style="width: 15%">
        </colgroup>
        <tr>
          <td>账单编号</td>
          <td>币种</td>
          <td>金额</td>
          <td>收款账户</td>
          <td>收款账号</td>
          <td>开户行</td>
        </tr>
        ${form.bill_details
          .map(
            (d) => `
        <tr>
          <td>${d.bill_number}</td>
          <td>${d.pay_currency}</td>
          <td>${d.pay_amount}</td>
          <td>${d.receive_account_name}</td>
          <td>${d.receive_account_number}</td>
          <td>${d.opening_bank}</td>
        </tr>
        `
          )
          .join("\n")}
      </table>
      <h4 style='margin-bottom: 10px'>操作日志</h4>
      <table style="border-spacing: 0;font-size: 14px" border="1" width="100%">
        <tr>
          <td>操作人</td>
          <td>操作类型</td>
          <td>操作时间</td>
        </tr>
        ${form.action_logs
          .map(
            (d) => `
        <tr>
          <td>${d.create_user}</td>
          <td>${d.op_title}</td>
          <td>${d.create_time}</td>
        </tr>
        `
          )
          .join("\n")}
      </table>
      `;
    CLODOP.ADD_PRINT_HTM(20, 20, "210mm", "280mm", html);
  }
  CLODOP.PREVIEW();
  await new Promise((reslove) =>
    setTimeout(reslove, list.value.success_data.length * 1000)
  );
};
const handleClose = () => {
  list.value = {};
  emit("update:modelValue", false);
  emit("close");
};
</script>
